<template>
  <div>
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item ref="form.name" required label="项目名称" name="name">
        <a-input v-model:value="form.name" placeholder="项目名称" />
      </a-form-item>
      <a-form-item label="项目描述" name="remark">
        <a-textarea v-model:value="form.remark" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">确定</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, ref, onMounted} from "vue";
import tools from "@/services/tools";
import service from "@/services/service";

export default defineComponent({
  props: {
    onSaveSuccess: Function,
    formKey: null,
  },
  setup(props, context) {
    const state = reactive({
      form: {
        id: props.formKey,
        name: "", //作业名称
        remark: "",
      },
    });
    const formRef = ref();
    const rules = {
      name: [
        {
          required: true,
          trigger: "blur",
        },
      ],
    };

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          methods.saveForm();
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    /*  watch(
      () => props.propVisible,
      (value) => {
        state.visible = value;
        /* state.form = props.formKey ? props.formKey : {}; 
      }
    );

    watch(
      () => state.visible,
      (value) => {
        context.emit("update:propVisible", value);
        if (value) {
          if (props.formKey) methods.find();
        } else resetForm();
      }
    ); */

    const methods = {
      find() {
        state.loading = true;
        service
          .findForm("Project", props.formKey)
          .finally(() => {
            state.loading = false;
          })
          .then((res) => {
            state.form = res.data;
          });
      },
      saveForm() {
        service.saveForm("Project", state.form).then((res) => {
          if (res.code != 1) return;
          tools.message("操作成功!", "成功");
          context.emit("on-save-success");
        });
      },
    };
    onMounted(() => {
      if (props.formKey) methods.find();
    });
    return {
      ...toRefs(state),
      ...methods,
      formRef,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      other: "",
      rules,
      onSubmit,
      resetForm,
    };
  },
});
</script>
